<template>
  <div class="well">
    <table class="table table-hover">
      <thead>
        <tr class="active">
          <td width="10%">ID</td>
          <td width="15%">标题</td>
          <td width="60%">内容</td>
          <td width="15%">操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in newsList" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.title}}</td>
          <td>{{item.content}}</td>
          <td>
            <button class="btn btn-success btn-sm" @click="edit(item)">编辑</button>
            &nbsp;
            <button class="btn btn-danger btn-sm" @click="del(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import vm from '../utils/vm'
export default {
    // 第二步: 接收父组件传递过来的数据
    props:['newsList'],
    methods:{
      // 新闻编辑
      edit(row){
        // this.$emit()触发自定义事件
        vm.$emit('editInfo',row);
        // 通知父组件Index显示模态框组件
        this.$emit('showModal',true);
      },
      del(id){
        // 通知父组件Index,删除对应ID的新闻
        this.$emit('delNews',id);
      }
    }
};
</script>

<style>
</style>